
// import Swiper core and required modules
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper';

import { Swiper, SwiperSlide } from 'swiper/react';

// Import Swiper styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';

import img1 from '../images/1.jpg';
import img2 from '../images/2.jpg';
import img3 from '../images/3.jpg';
import img4 from '../images/4.jpg';
import { Button } from 'antd';
import { Link } from 'react-router-dom';

function Home(){
    return (
        <>
        <div>home页面</div>
        <header className="App-header">
        这是聚仙阁
        <Button type='primary'><Link to='/home'>Home链接</Link></Button>
        <Button type='primary'><Link to='/about'>About</Link></Button>
        <Button type='primary'><Link to='/management'>Management</Link></Button>
      </header>
        <Link to="/about">about---</Link>
        <Swiper
            // install Swiper modules
            modules={[Navigation, Pagination, Scrollbar, A11y]}
            spaceBetween={50}
            slidesPerView={3}
            navigation
            pagination={{ clickable: true }}
            scrollbar={{ draggable: true }}
            // onSwiper={(swiper) => console.log(swiper)}
            // onSlideChange={() => console.log('slide change')}
            >
            <SwiperSlide><img src={img1} width='300px' height='400px' alt=''></img></SwiperSlide>
            <SwiperSlide><img src={img2}  width='300px' height='400px'alt=''></img></SwiperSlide>
            <SwiperSlide><img src={img3}  width='300px' height='400px'alt=''></img></SwiperSlide>
            <SwiperSlide><img src={img4}  width='300px' height='400px'alt=''></img></SwiperSlide>
            
        </Swiper>
        </>
    )
}
export default Home;